<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 
    利用position可以对元素进行定位，常用取值有5个:
    static | relative | absolute | sticky | fixed
    默认值:
    口 static:默认值静态定位   top left bottom right 无效
    使用下面的值可以让元素变成 定位元素(positioned element)
    口 relative: 相对定位
    口absolute: 绝对定位
    口fixed: 固定定位
    口 sticky: 粘性定位
    */
 
    .box{
        display: inline-block;

    }
    .text{
        position: relative;
        top:30px;
        left: 50px;
    }
    img{
        width: 300px;
        height: 300px;
    }
       /* 相对定位
    
    元素按照normal flow布局

    可以通过left、right、top、bottom进行定位
    口 定位参照对象是元素自己原来的位置left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

    相对定位的应用场景
    口在不影响其他元素位置的前提下，对当前元素位置进行微调
    */
    .pf{
        font-size: 8px;
        position: relative;
        bottom: 6px;
        right: 5px;
    }
    /* 固定定位 - fixed
    元素脱离normal flow(脱离标准流、脱标)
    
    可以通过left、right、 top、bottom进行定位
    定位参照对象是视口(viewport)

    当画布滚动时，固定不动
    */
    .text01{
        position: fixed;
        right: 0;
        top: 30px;
    }
    .btn{
        padding: 10px;
        position: fixed;
        right: 10px;
        bottom: 10px;
    }
    .btn button{
        height: 30px;
        margin-bottom: 10px;
        background-color: cornflowerblue;
        border: none;
        color: #333;
        border-radius: 8px;
        width: 50px;
    }
    /* 
    子绝父相
    在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
    如果希望子元素相对于父元素进行定位又不希望父元素脱标常用解决方案是口父元素设置position: relative (让父元素成为定位元素，而且父元素不脱离标准流)
    口子元素设置position: absolute
    口简称为“子绝父相“
    */
    .text02{
        position: absolute;
        left:0;
        bottom: 0;
    }
    .container{
        position: relative;
        width: 1000px;
        height: 800px;
        background-color: #f00;
    }
    .box_2{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 800px;
        height: 600px;
        background-color: #0f0;

    }
  </style>
  <body>
    <div>----------相对定位----------</div>
    <div>
        3 <span class="pf">2</span>+2 = 11
    </div>
    <div>----------固定定位----------</div>
    <div>
        <span>我是span元素</span>
        <strong class="text01">strong文本222222</strong>
        <img src="../imgs/bird.png" alt="" srcset="">
        <div>我是div元素</div>
        <div class="btn">
            <div>
                <button>顶部</button>
            </div>
            <div>
                <button>反馈</button>
            </div>
        </div>
    </div>
    <div>----------绝对定位----------</div>
    <div class="container">
        <div class="box_2">
            <span>我是span元素</span>
            <strong class="text02">strong文本绝对定位</strong>
            <img src="../imgs/bird.png" alt="" srcset="">
            <div>我是div元素</div>
        </div>
    </div>
  </body>
</html>
